<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全息画廊</title>
    <style>
        :root {
            --neon-blue: #4dabf7;
            --neon-cyan: #63e6be;
        }

        body {
            margin: 0;
            height: 100vh;
            background: radial-gradient(circle at center, #1a1a2e 0%, #0a0a1a 100%);
            display: flex;
            overflow: hidden;
            font-family: 'Segoe UI', sans-serif;
        }

        /* 画廊容器 */
        .gallery-column {
            height: 100vh;
            position: relative;
            overflow: hidden;
        }
        
        #left-gallery {
            width: 40%;
            animation: scroll 80s linear infinite;
        }

        #right-gallery {
            width: 30%;
            animation: scroll 60s linear infinite reverse;
        }

        /* 3D凹陷效果 */
        .gallery-column::before {
            content: '';
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%);
            background: linear-gradient(45deg, 
                rgba(77, 171, 247, 0.1) 0%,
                rgba(99, 230, 190, 0.05) 100%);
            z-index: 2;
        }

        /* 画作样式 */
        .artwork {
            margin: 20px;
            background: #000;
            box-shadow: 0 0 15px var(--neon-blue);
            transition: transform 0.3s;
        }

        #left-gallery .artwork {
            aspect-ratio: 4/3;
        }

        #right-gallery .artwork {
            aspect-ratio: 3/4;
        }

        /* 中间控制区 */
        #control-center {
            width: 30%;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }

        /* 弹幕区样式 */
        #danmaku-container {
            flex: 1;
            width: 100%;
            position: relative;
            overflow: hidden;
        }

        .danmaku {
            position: absolute;
            color: var(--neon-cyan);
            white-space: nowrap;
            text-shadow: 0 0 10px var(--neon-cyan);
        }

        /* 科技感按钮 */
        .cyber-button {
            padding: 15px 30px;
            background: transparent;
            border: 2px solid var(--neon-blue);
            color: var(--neon-blue);
            position: relative;
            overflow: hidden;
            transition: 0.3s;
        }

        @keyframes scroll {
            0% { transform: translateY(0); }
            100% { transform: translateY(-50%); }
        }
    </style>
</head>
<body>
    <!-- 左侧画廊 -->
    <div class="gallery-column" id="left-gallery">
        
    </div>

    <!-- 控制中心 -->
    <div id="control-center">
        <button class="cyber-button" onclick="location.href='picture_details.html'">监控面板</button>
        
        <!-- 弹幕区 -->
        <div id="danmaku-container"></div>
        <div style="width:100%">
            <input id="danmaku-input" type="text" style="width:70%; background: #0002; color: white;">
            <button class="cyber-button" onclick="sendDanmaku()">发送</button>
        </div>

        <button class="cyber-button" style="margin-top:20px;" onclick="location.href='about.html'">返回基地</button>
    </div>

    <!-- 右侧画廊 -->
    <div class="gallery-column" id="right-gallery">
        <img src="images/avatar.jpg" width="300px" alt="">
        <img src="images/basketball.jpg" width="300px" alt="">
        <img src="images/wrap.jpg" width="300px" alt="">​
    </div>

    <script>
        // 生成动态画作
        function createArtworks() {
            const artworks = 100;
            const fragmentLeft = document.createDocumentFragment();
            const fragmentRight = document.createDocumentFragment();

            for(let i = 0; i < artworks; i++) {
                const img = document.createElement('div');
                img.className = 'artwork';
                img.style.background = `linear-gradient(45deg, 
                    hsl(${Math.random()*360}, 70%, 40%),
                    hsl(${Math.random()*360}, 70%, 30%))`;
                fragmentLeft.appendChild(img.cloneNode(true));
                fragmentRight.appendChild(img.cloneNode(true));
            }

            // 实现无缝滚动
            document.getElementById('left-gallery').append(fragmentLeft);
            document.getElementById('right-gallery').append(fragmentRight);
        }

        // 弹幕功能
        function sendDanmaku() {
            const container = document.getElementById('danmaku-container');
            const input = document.getElementById('danmaku-input');
            
            const danmaku = document.createElement('div');
            danmaku.className = 'danmaku';
            danmaku.textContent = input.value;
            input.value = '';

            const yPos = Math.random() * 80;
            danmaku.style.top = yPos + '%';
            danmaku.style.left = '100%';
            
            container.appendChild(danmaku);
            
            // 动画效果
            requestAnimationFrame(() => {
                danmaku.style.transform = `translateX(-${container.offsetWidth + danmaku.offsetWidth}px)`;
                setTimeout(() => danmaku.remove(), 5000);
            });
        }

        // 初始化
        window.onload = () => {
            createArtworks();
            
            // 添加画作悬浮效果
            document.querySelectorAll('.artwork').forEach(art => {
                art.onmouseenter = () => art.style.transform = 'scale(1.05)';
                art.onmouseleave = () => art.style.transform = 'scale(1)';
            });
        };
    </script>
</body>
</html>